import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select,Radio,InputNumber,TimePicker,DatePicker } from 'antd';
import moment from 'moment';
import styles from '../../collect/slotCheck/index.less';
import addCaseImg from '@/assets/dialog/slot/addCase.png';
import addCaseGroupImg from '@/assets/dialog/slot/addCaseGroup.png';
import andImg from '@/assets/dialog/and.png';
import delImg from '@/assets/dialog/del1.png';
import orImg from '@/assets/dialog/or1.png';

const dateFormat = 'YYYY-MM-DD';
const timeFormat = 'HH:mm:ss';
const { Option } = Select;
const { TextArea } = Input;
const { Search } = Input;
const formItemLayout = {
  labelCol: { span: 3 },
  wrapperCol: { span: 20 },
};

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dictModalShow:false,
      values:[],
      slotIndex:"",
      itemIndex:"",
      index:"",
      slotArr:[],
      slotCoreArr:[],
      idArr:[],
      queryKey:"",
      slotId:"",
      slot:null
    };
  }

  delCaseItem=(index)=>{
    const {caseArr,upDateCase} = this.props;
    caseArr.splice(index,1);
    upDateCase(caseArr);
  };

  forMapSlots = (tag,itemIndex,index) => {
    const {dialogSlots} = this.props;
    const OptionElem = dialogSlots.map(this.forMapSlotsOption);
    return (
      <span style={{marginLeft: 15}} key={itemIndex}>
        <span className={styles.slotNumber}>{itemIndex+1}</span>
        <Select size='small' placeholder="请选择" value={tag.slotId?tag.slotId:'N'} key={itemIndex} style={{ width: 120,marginLeft:20 }} onChange={(value)=>this.handleSlotSelectChange(value,itemIndex,index)}>
          {OptionElem}
        </Select>
        <Icon type="close-circle" style={{marginLeft:5,cursor:'pointer'}} onClick={()=>this.delSlotByIndex(itemIndex,index)} />
      </span>
    );
  };



  forMap = (caseItem,index) => {
    const CaseElem = caseItem.map((items,itemIndex)=>this.forMapCommCase(items,itemIndex,index,caseItem));
    return (
      <Row>
        {
          CaseElem
        }
      </Row>
    );
  };

  addSlot=(index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotIds.push({});
    this.upDataByCallBack(caseArr)
  };

  delSlotByIndex=(itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotIds.splice(itemIndex,1);
    this.upDataByCallBack(caseArr)
  };

  handleSlotSelectChange=(val,itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotIds[itemIndex].slotId=val;
    this.upDataByCallBack(caseArr)
  };

  forMapItemCase=(items,itemIndex)=>{
    switch (items.itemType) {
      case undefined:
        return(
          <div>
            {
              items.map((commItem,commItemIndex)=>this.forMapCommCase(commItem,commItemIndex,itemIndex,items))
            }
            {/* { */}
            {/* itemIndex === items.length-1? <Button htmlType='button' type="primary" size='small' onClick={()=>this.addGroupCase(itemIndex,itemIndex)} className={styles.addGroupItem}>添加条件组</Button>:'' */}
            {/* } */}
          </div>
        );
      default:
        return  this.forMapSpecialCase(items,itemIndex)
    }
  };

  forMapCommCase =(items,itemIndex,index,caseItem)=>{
    switch (items.itemType) {
      case 'slot':
        return this.renderSlotCase(itemIndex,index,items,caseItem);
      default:
        return this.renderLogicCase()
    }
  };

  forMapSpecialCase=(specialItem,specialItemIndex)=>{
    return(
      <div key={specialItemIndex}>
        <img src={orImg} alt="" height={30}/>
      </div>
    )
  };

  renderSlotCase=(itemIndex,index,slotItem,caseItem)=>{
    return(
      <Row key={itemIndex} style={{marginLeft:180,position:'relative'}}>
        <Col>
          <Select placeholder="请选择" value={slotItem.opera.operaType} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operaType')}>
            <Option value="slot">词槽</Option>
            <Option value="api">API</Option>
          </Select>
          {
            this.renderSlotItemOperaOperaType(itemIndex,index,slotItem,caseItem)
          }
          {
            this.renderSlotItemOperatorChange(itemIndex,index,slotItem,caseItem)
          }
          {
            this.renderInputBySlotItemOperator(slotItem,slotItem.operator,itemIndex,index)
          }
          {
            this.renderTimeSelect(slotItem,slotItem.operator1,itemIndex,index)
          }
          {/*<Icon type="close-circle" onClick={()=>this.delCaseItemByCloseIcon(slotItem,itemIndex,index)} style={{marginLeft:5,cursor:'pointer'}} />*/}
          <img src={delImg} alt="" height={20} style={{marginLeft:10,cursor:"pointer"}} onClick={()=>this.delCaseItemByCloseIcon(slotItem,itemIndex,index)}  />


        </Col>
        <Col style={{marginLeft:50}}>
          {
            itemIndex === caseItem.length-1?
              <span className={styles.addOneCase} onClick={()=>this.addOnecase(itemIndex,index,slotItem,caseItem)}>
                 <img src={addCaseImg} alt="添加条件" height={70} />
              </span>

              :''
          }
        </Col>
      </Row>
    )
  };

  renderSlotItemOperaOperaType=(itemIndex,index,slotItem,caseItem)=>{
    const {dialogSlots,data,fieldList} = this.props;
    let OptionElem = null;
    let apiOptElem= null;
    let FieldOptElem = null;
    if(dialogSlots.length>0){
      OptionElem = dialogSlots.map((item)=>this.forMapSlotsOption(item,'slot'));
    }
    if(data.length>0){
      apiOptElem = data.map((item)=>this.forMapSlotsOption(item,'api'));
    }
    if(fieldList.length>0){
      FieldOptElem =  fieldList.map((item)=>this.forMapSlotsOption(item,'field'));
    }
    switch (slotItem.opera.operaType) {
      case 'slot':
        return(
          <span>
            <Select placeholder="请选择" value={slotItem.slotsId} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'slotsId')}>
              {OptionElem}
            </Select>
            <Select placeholder="请选择" value={slotItem.type} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'type')}>
              <Option value="status">状态</Option>
              <Option value="value">值</Option>
              <Option value="inquiriesNumber">询问次数</Option>
            </Select>
          </span>
        );
      case 'api':
        return (
          <span>
            <Select placeholder="请选择" value={slotItem.apiId} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'apiId')}>
              <Option value="N">请选择</Option>
              {apiOptElem}
            </Select>
            <span>的返回字段</span>
            <Select placeholder="请选择" value={slotItem.apiField} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'apiField')}>
              <Option value="N">请选择</Option>
              <Option value="status">状态码</Option>
              {FieldOptElem}
            </Select>
            {
              this.renderSlotItemApiField(itemIndex,index,slotItem,caseItem)
            }
          </span>
        );
      default:
        return ""
    }
  };

  renderSlotItemApiField=(itemIndex,index,slotItem,caseItem)=>{
    switch (slotItem.apiField) {
      case 'status':
        return (
          <span>
            <Select placeholder="请选择" value={slotItem.operator} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operator')}>
              <Option value="equal">等于</Option>
              <Option value="not_equal">不等于</Option>
            </Select>
            <Select placeholder="请选择" value={slotItem.reqStatus} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'reqStatus')}>
              <Option value="0">0</Option>
              <Option value="1">1</Option>
              <Option value="2">2</Option>
              <Option value="3">3</Option>
              <Option value="4">4</Option>
              <Option value="5">5</Option>
              <Option value="6">6</Option>
              <Option value="7">7</Option>
              <Option value="8">8</Option>
              <Option value="9">9</Option>
            </Select>
          </span>
        );
      case "N":
        return '';
      default :
        return (
          <span>
            <Select placeholder="请选择" value={slotItem.fieldOperationType} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'fieldOperationType')}>
              <Option value="val">字段值</Option>
              <Option value="num">返回条数</Option>
            </Select>
            <Select placeholder="请选择" value={slotItem.operator} className={styles.selectItem} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operator')}>
              <Option value="equal">等于</Option>
              <Option value="lt">小于</Option>
              <Option value="gt">大于</Option>
              <Option value="gte">大于等于</Option>
              <Option value="lte">小于等于</Option>
              <Option value="contain">包含</Option>
              <Option value="not_contain">不包含</Option>
            </Select>
            <Input style={{width:120}} value={slotItem.reqStatus} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'reqStatus',true)} />
          </span>
        )
    }
  };

  renderSlotItemOperatorChange=(itemIndex,index,slotItem,caseItem)=>{
    switch (slotItem.type) {
      case 'status':
        return(
          <Select placeholder="请选择" value={slotItem.operator} style={{ width: 100,marginLeft:5,marginRight:5 }} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operator')}>
            <Option value="filled">已填充</Option>
            <Option value="unfilled">未填充</Option>
          </Select>
        );
      case 'value':
        return(
          <Select placeholder="请选择" value={slotItem.operator} className={styles.selectItem} style={{width:180}} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operator')}>
            <Option value="equal_number">等于(数值型)</Option>
            <Option value="not_equal_number">不等于(数值型)</Option>
            <Option value="contain">包含</Option>
            <Option value="not_contain">不包含</Option>
            <Option value="great_than">大于(对应数值型词槽)</Option>
            <Option value="less_than">小于(对应数值型词槽)</Option>
            <Option value="great_than_equal">大于等于(对应数值型词槽)</Option>
            <Option value="less_than_equal">小于等于(对应数值型词槽)</Option>
            <Option value="great_than_time">大于(对应时间段型词槽)</Option>
            <Option value="less_than_time">小于(对应时间段型词槽)</Option>
            <Option value="new_than">早于(对应日期时间型词槽)</Option>
            <Option value="old_than">晚于(对应日期时间型词槽)</Option>
            <Option value="equal_string">等于(字符串型)</Option>
            <Option value="not_equal_string">不等于(字符串型)</Option>
          </Select>
        );
      case 'inquiriesNumber':
        return(
          <Select placeholder="请选择" value={slotItem.operator} className={styles.selectItem} style={{width:180}} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operator')}>
            <Option value="equal_number">等于(数值型)</Option>
            <Option value="not_equal_number">不等于(数值型)</Option>
            <Option value="great_than">大于(对应数值型词槽)</Option>
            <Option value="less_than">小于(对应数值型词槽)</Option>
            <Option value="great_than_equal">大于等于(对应数值型词槽)</Option>
            <Option value="less_than_equal">小于等于(对应数值型词槽)</Option>
          </Select>
        );
      default:
        return ""
    }
  };

  forMapSlotsOption = (option,type) =>{
   switch (type) {
     case 'slot':
       return (
         <Option key={option.slotId} value={option.slotId}>#{option.slotName}#</Option>
       );
     case 'api':
       return (
         <Option key={option._id} value={option._id}>{option.name}</Option>
       );
     case 'field':
       return (
         <Option key={option.id} value={option.id}>{option.name}</Option>
       );
     default:
       return ''
   }
  };

  renderLogicCase=(logicItem,logicIndex)=>{
    return(
    <div key={logicIndex} style={{position:'absolute',left:150,marginTop:6}}>
      <img src={andImg} alt="" style={{width:30}}/>
    </div>
    )
  };

  upDataByCallBack=(res)=>{
    const {upNewData} = this.props;
    upNewData(res)
  };

  upSelectedData=(res,index)=>{
    const {caseArr} = this.props;
    caseArr[index].slotsList= res;
    this.upDataByCallBack(caseArr)
  };

  /*
  * item 当前对象
  * index 当前对象所在数组索引
  * itemIndex 当前数组所在二维数组索引
  * rootIndex 循环根index
  * */
  addOnecase = (itemIndex,index,slotItem,caseItem) =>{
    const {caseArr} = this.props;
    caseArr[index].push(
      {
        itemType: "logic",
        value: "and"
      }
    );
    caseArr[index].push(
      {
        itemType: "slot",
        apiId:" ",
        operator1:' ',
        time:'',
        time1:'',
        values:[],
        opera:{
          operaType:"slot"
        },
        apiField:" ",
        type:"status",
        reqStatus:"",
        operator:'',
        fieldOperationType:" ",
        slotIds:""
      }
    );
    this.upDataByCallBack(caseArr)
  };

  addGroupCase = (itemIndex,rootIndex) => {
    const {caseArr} = this.props;
    caseArr.push(
      {
        itemType: "logic",
        value: "or"
      }
    );
    caseArr.push(
      [
        {
          itemType: "slot",
          apiId:" ",
          operator1:' ',
          time:'',
          time1:'',
          values:[],
          opera:{
            operaType:"slot"
          },
          apiField:" ",
          type:"status",
          reqStatus:"",
          operator:'',
          fieldOperationType:" ",
          slotIds:""
        }
      ]
    );
    this.upDataByCallBack(caseArr)
  };

  delCaseItemByCloseIcon = (item,slotIndex,itemIndex) => {
    const {caseArr} = this.props;
    if(slotIndex === 0 && itemIndex === 0 ){
      // caseArr[itemIndex].splice(slotIndex,1);
      return false;
    }

    if(caseArr[itemIndex].length>0){
      if(slotIndex ===0){
        caseArr[itemIndex].splice(slotIndex,1);
        caseArr.splice(itemIndex,1);
        caseArr.splice(itemIndex-1,1);
      }else if(caseArr[itemIndex][slotIndex-1].itemType !== undefined){
        caseArr[itemIndex].splice(slotIndex,1);
        caseArr[itemIndex].splice(slotIndex-1,1);
      }
    }else if(caseArr[itemIndex].itemType !== undefined){
      caseArr.splice(itemIndex,1);
      caseArr.splice(itemIndex-1,1);
    }
    this.upDataByCallBack(caseArr)
  };

  onSlotOnChange = (e,slotItem,slotIndex,itemIndex,index,type) =>{
    const {caseArr} = this.props;
    caseArr[index].caseItemGroups[itemIndex][slotIndex][type] = e;
    this.upDataByCallBack(caseArr)
  };

  fixInquire=(val,index,type)=>{
    const {caseArr} = this.props;
    if(type === 'isClear'){
      caseArr[index][type]=val.target.checked;
    }else{
      caseArr[index][type]=val.target.value;
    }
    this.upDataByCallBack(caseArr)
  };

  fixRadio = (val,index) =>{
    const {caseArr} = this.props;
    caseArr[index].radio=val.target.value;
    this.upDataByCallBack(caseArr)
  };

  forMapOptionItem =(optionsItem,itemIndex,index)=>{
    return(
      <Col span={8} gutter={10} key={itemIndex}>
        <span>
          <span className={styles.slotNumber}>{itemIndex+1}</span>
          <Input placeholder="" style={{width:120}} value={optionsItem} defaultValue="" onChange={(e)=>this.UpdateOption(e,itemIndex,index)} />
          <Icon type="close-circle" style={{marginLeft:5,cursor:'pointer'}} onClick={()=>this.delOptionsByIndex(itemIndex,index)} />
        </span>
      </Col>
    )
  };

  addOptions = (index) =>{
    const {caseArr} = this.props;
    caseArr[index].options.push('');
    this.upDataByCallBack(caseArr)
  };

  delOptionsByIndex =(itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].options.splice(itemIndex,1);
    this.upDataByCallBack(caseArr)
  };

  UpdateOption =(e,itemIndex,index)=>{
    const {caseArr} = this.props;
    caseArr[index].options[itemIndex]= e.target.value;
    this.upDataByCallBack(caseArr)
  };

  renderInputBySlotItemOperator = (slotItem,type,itemIndex,index) =>{
    switch (type) {
      case 'filled':
      case 'unfilled':
        return "";
      case 'equal_string':
      case 'not_equal_string':
      case 'contain':
      case 'not_contain':
        let string = '';

        if(slotItem.values.length>0){
          for(let i of slotItem.values){
            string += i.name+','
          }
        }
        return (
          <span>
            <Input style={{width:170}} disabled value={string} onClick={()=>this.showGetDictItemModal(slotItem.values,itemIndex,index)} />
            <Icon type="appstore" theme="twoTone" style={{marginLeft:5,cursor:'pointer'}} onClick={()=>this.showGetDictItemModal(slotItem.values,itemIndex,index,slotItem.slotsId)} />
          </span>
        );
      case 'equal_number':
      case 'not_equal_number':
      case 'great_than':
      case 'less_than':
      case 'great_than_equal':
      case 'less_than_equal':
        return (
          <span>
            <InputNumber min={1} value={slotItem.reqStatus} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'reqStatus',)} />
          </span>
        );
      case 'great_than_time':
      case 'less_than_time':
        return (
          <span>
            <InputNumber min={1} value={slotItem.values[0]} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'values','',true)}  />
            <Select placeholder="请选择" value={slotItem.operator1} style={{ width: 100,marginLeft:5,marginRight:5 }} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operator1')}>
              <Option value="d">天</Option>
              <Option value="w">周</Option>
              <Option value="m">月</Option>
              <Option value="y">年</Option>
              <Option value="h">时</Option>
              <Option value="min">分</Option>
              <Option value="s">秒</Option>
            </Select>
          </span>
        );
      case 'new_than':
      case 'old_than':
        return (
          <span>
            <Select placeholder="请选择" value={slotItem.operator1} style={{ width: 100,marginLeft:5,marginRight:5 }} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'operator1')}>
              <Option value="J">今天</Option>
              <Option value="Z">昨天</Option>
              <Option value="M">明天</Option>
              <Option value="H">后天</Option>
              <Option value="week">本周</Option>
              <Option value="mon">本月</Option>
              <Option value="date">固定日期</Option>
            </Select>
          </span>
        );
      default:
        return "";
    }
  };

  updataItemCommonData=(e,slotIndex,itemIndex,type,isInput,isEmptyArr)=>{
    const {caseArr} =this.props;
    if(isInput){
      caseArr[itemIndex][slotIndex][type] = e.target.value;
    }else{
      if(isEmptyArr){
        caseArr[itemIndex][slotIndex].values[0]= e
      }else{
        switch (type) {
          case 'operaType':
            caseArr[itemIndex][slotIndex].opera.operaType = e;
            caseArr[itemIndex][slotIndex].type='';
            break;
          case 'apiId':
            caseArr[itemIndex][slotIndex][type] = e;
            this.getApiInfo(e);
            break;
          case 'great_than_time':
          case 'less_than_time':
            caseArr[itemIndex][slotIndex][type] = e;
            caseArr[itemIndex][slotIndex].values= [];
            break;
          default :
            caseArr[itemIndex][slotIndex][type] = e;
        }
      }
    }

    this.upDataByCallBack(caseArr);
  };

  getApiInfo = (apiId) =>{
    const { dispatch } = this.props;
    dispatch({
      type: 'dialogCommon/loadActionApi',
      payload: {
        apiId,
      },
      callback:(res)=>{
        let fieldList;
        fieldList = res.responseFields	==null?[]:res.responseFields;
        this.props.upApiFiled(fieldList)
      }
    });
  };


  renderTimeSelect=(slotItem,type,slotIndex,itemIndex,index)=>{
    switch (type){
      case 'J':
      case 'Z':
      case 'M':
      case 'H':
        return this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
      case 'week':
        return(
          <span>
            <Select  placeholder="请选择" style={{ width: 100,marginLeft:5,marginRight:5 }} value={slotItem.time1} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'time1')}>
              <Option value="1">周一</Option>
              <Option value="2">周二</Option>
              <Option value="3">周三</Option>
              <Option value="4">周四</Option>
              <Option value="5">周五</Option>
              <Option value="6">周六</Option>
              <Option value="7">周日</Option>
            </Select>
            {
              this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
            }
          </span>
        );
      case 'mon':
        return(
          <span>
            <Select placeholder="请选择" style={{ width: 100,marginLeft:5,marginRight:5 }} value={slotItem.time1} onChange={(e)=>this.updataItemCommonData(e,itemIndex,index,'time1')}>
              <Option value="1">1日</Option>
              <Option value="2">2日</Option>
              <Option value="3">3日</Option>
              <Option value="4">4日</Option>
              <Option value="5">5日</Option>
              <Option value="6">6日</Option>
              <Option value="7">7日</Option>
              <Option value="8">8日</Option>
              <Option value="9">9日</Option>
              <Option value="10">10日</Option>
              <Option value="11">11日</Option>
              <Option value="12">12日</Option>
              <Option value="13">13日</Option>
              <Option value="14">14日</Option>
              <Option value="15">15日</Option>
              <Option value="16">16日</Option>
              <Option value="17">17日</Option>
              <Option value="18">18日</Option>
              <Option value="19">19日</Option>
              <Option value="20">20日</Option>
              <Option value="21">21日</Option>
              <Option value="22">22日</Option>
              <Option value="23">23日</Option>
              <Option value="24">24日</Option>
              <Option value="25">25日</Option>
              <Option value="26">26日</Option>
              <Option value="27">27日</Option>
              <Option value="28">28日</Option>
              <Option value="29">29日</Option>
              <Option value="30">30日</Option>
              <Option value="31">31日</Option>
            </Select>
            {
              this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
            }
          </span>

        );
      case 'date':
        return(
          <span>
            <DatePicker style={{marginLeft:5}} value={moment(slotItem.time1 ===''?new Date():slotItem.time1,dateFormat)} onChange={(time,timeString)=>this.updataItemCommonData(timeString,slotIndex,itemIndex,'time1')} />
            {
              this.renderTimePicker(slotItem,type,slotIndex,itemIndex,index)
            }
          </span>
        );
      default :
        return '';
    }
  };

  renderTimePicker=(slotItem,type,slotIndex,itemIndex,index)=>{
    return(
      <TimePicker style={{marginLeft:5}} value={moment(slotItem.time ===''?"00:00:00":slotItem.time,timeFormat)} onChange={(time,timeString)=>this.updataItemCommonData(timeString,slotIndex,itemIndex,'time')} />
    )
  };

  showGetDictItemModal=(values,itemIndex,index,id)=>{
    if(id === ''){
      return message.info('请选择词槽')
    }
    this.setState({
      dictModalShow:true,
      values,
      itemIndex,index,slotId:id
    },()=>{
      this.fetchSlotDetailBySlotId();
    })
  };

  fetchSlotDetailBySlotId=(queryKey)=> {
    const that = this;
    const { dispatch } = that.props;
    const { slotId } = this.state;
    that.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'collectSlot/getSlotInfo',
        payload: { slotId, queryKey },
        callback: (res) => {
          that.setState({
            slotCoreArr: res[0].items,
            slot: res[0]
          })
        }
      })
    });
  };

  hideGetDictItemModal=()=>{
    this.setState({
      dictModalShow:false
    })
  };

  modifValues=(e)=>{
    this.setState({
      values:e.target.value
    })
  };

  fixString =(str)=> {
    var temp = str.split(/[\n\s+,，；;]/g);
    for (var i = 0; i < temp.length; i++) {
      if (temp[i] == "") {
        // 删除数组中空值
        temp.splice(i, 1);
        i--;
      }
    }
    return temp;
    console.log(temp);
  };

  saveValues=(values,slotIndex,itemIndex,index)=>{
    const {caseArr} =this.props;
    console.log(caseArr,'-----------caseArr',slotIndex,itemIndex,index);
    if(typeof values === 'string'){
      let arr = this.fixString(values);
      let resArr = [];
      for(let i of arr){
        resArr.push({
          id:"",
          name:i
        })
      }
      caseArr[itemIndex][slotIndex].values=resArr;
    }else {
      caseArr[itemIndex][slotIndex].values=values;
    }

    this.upDataByCallBack(caseArr);
    this.hideGetDictItemModal();
  };

  addSlotItem =(id,name)=>{
    const { values,idArr} = this.state;
    values.push({
      id,
      name
    });
    idArr.push(id)

    this.setState({
      values,idArr
    })
  };

  mapSlotArr=(slotItem,slotIndex)=>{
    const {idArr} = this.state;
    if(idArr.indexOf(slotItem._id)>-1){
      return(
        <Col key={slotIndex} span={8} style={{marginTop:10}}>
          <Button htmlType='button' type="primary" size='small' disabled onClick={()=>this.addSlotItem(slotItem._id,slotItem.word,slotIndex)} className={styles.addSlotItem}>已添加</Button>
          {slotItem.word}
        </Col>
      )
    }else{
      return(
        <Col key={slotIndex} span={8} style={{marginTop:10}}>
          <Button htmlType='button' type="primary" size='small' onClick={()=>this.addSlotItem(slotItem._id,slotItem.word,slotIndex)} className={styles.addSlotItem}>添加</Button>
          {slotItem.word}
        </Col>
      )
    }
  };

  delCoreWords = (index)=>{
    const  {values,idArr} = this.state;
    idArr.splice(idArr.indexOf(values[index].id),1);
    values.splice(index,1);
    this.setState({
      values,
      idArr
    })
  };
  render() {
    const {caseArr} = this.props;
    const CaseChild = caseArr.map((item,index)=>this.forMapItemCase(item,index));
    const {dictModalShow,slotIndex,itemIndex,index,slotArr,slotCoreArr,slot} = this.state;
    const slotEle = slotCoreArr.map(this.mapSlotArr);
    let {values} = this.state;
    let newName ='';
    if(typeof values =='object' && slot !== null && !slot.isEnum){
      if(values.length>0){
        for(let i of values){
          newName += i.name+','
        }
      }
    }else{
      newName = values
    }
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          {CaseChild}
          {/*<Button htmlType='button' type="primary" size='small' onClick={()=>this.addGroupCase(itemIndex,itemIndex)} className={styles.addGroupItem}>添加条件组</Button>*/}
          <img src={addCaseGroupImg} alt="添加条件组" onClick={()=>this.addGroupCase(itemIndex,itemIndex)}  style={{cursor:"pointer",marginLeft:180}} height={70} />

          <Modal
            title="词槽值集合"
            visible={dictModalShow}
            onOk={this.hideGetDictItemModal}
            onCancel={this.hideGetDictItemModal}
            onChange={(e)=>this.modifValues(e)}
            footer={[
              <Button key="save" type="primary" onClick={()=>this.saveValues(values,slotIndex,itemIndex,index)}>
                保存
              </Button>
            ]}
          >
            {
              slot !== null && slot.isEnum?
                <div>
                  {
                    values.map((tag,index)=>{
                      return(
                        <Tag color="magenta" closable onClose={()=>this.delCoreWords(index)}>{tag.name}</Tag>
                      )
                    })
                  }
                  <Search
                    placeholder=""
                    onSearch={value => this.fetchSlotDetailBySlotId(value)}
                    style={{ width: '100%',marginTop:10 }}
                  />
                  <div style={{padding:10}}>
                    <Row gutter={16} >
                      {slotEle}
                    </Row>
                  </div>
                </div>
                :
                <TextArea rows={4} value={newName} autosize={{ minRows: 2, maxRows: 16 }}  onChange={(e)=>this.modifValues(e)} />
            }
          </Modal>
        </Suspense>
      </GridContent>
    );
  }
}
export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(Item));
